<template>
  <div class='top_bar'>
    <div class='banner_area' v-if="dataSourse" v-show="showBanner">
      <van-swipe class="img" :autoplay="3000">
        <van-swipe-item v-for="(item,index) in dataSourse" :key="index">
          <span class='swipe_img'>
            <img :src='item.img' />
          </span>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <div class='tab_area'>
      <div class='tab' :class='activeSortTab==index?"activeTab":""' v-for="(item,index) of options" :key="index">
        <div :class='setLabel(item)'>{{item.label}}</div>
        <div class='tip' @click='changeSortTab(item,index)'>
          {{item.label1}}
        </div>
      </div>
    </div> -->
    <ul class="tab-bar">
      <li class='tab-item' :class="[item.value == value ? 'active1' : '']" v-for="(item,index) of tabList" :key="index" @click="changeTab(item,index)">
        {{getLabel(item)}}
        <div :class="[item.value == value ? 'active' : '']"></div>
      </li>
    </ul>
    <div class='search_area'>
      <div class='divtip'>
        <input type="text" v-model="keyWord" placeholder="厂家/品种/货号">
        <div class='div' @click='search'>搜索</div>
      </div>
    </div>
    <div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataSourse: {},
    value: {},
    // num: '',
    showBanner: true,
  },
  data() {
    return {
      keyWord: '',
      activeSortTab: '',
      tabList: [
        { label: '全部', value: 0 },
        { label: '未加购', value: 2 },
        { label: '已加购', value: 1 },
      ],
      options: [
        {
          value: [2, 3],
          label: '成药',
          label1: '西药,中成药',
        },
        {
          value: [4],
          label: '中药饮片',
        },
        {
          value: [5],
          label: '保健食品',
        },
        {
          value: [7],
          label: '日化品',
        },
        {
          value: [6],
          label: '器械',
        },
      ],
    }
  },
  mounted() {},
  methods: {
    changeSortTab(item, index) {
      this.keyWord = ''
      this.activeSortTab = index
      this.$emit('changeSortTab', item)
      if (index == this.activeSortTab) {
        return ' activeTab'
      }
    },
    setLabel(item) {
      if (item.label == '成药') {
        return 'row1'
      } else {
        return 'row'
      }
    },
    getLabel(item) {
      let num
      if (this.num) {
        num = this.num
      } else {
        num = 0
      }
      if (item.label == '已加购') {
        return item.label 
        // + '(' + num + ')'
      } else {
        return item.label
      }
    },
    changeTab(item, index) {
      this.$emit('input', item.value)
      this.$emit('changeTab', item.value, item, index)
    },
    search() {
      this.$emit('search', this.keyWord)
    },
  },
}
</script>
<style lang="less" scoped>
.top_bar {
  font-size: 0;
  .search_area {
    padding: 26px 24px;
    z-index: 999;
    height: 72px;
    .divtip {
      display: flex;
      border-radius: 37px;
      opacity: 1;
      height: 100%;
      background: #ffffff;
      border: 2px solid #472eb0;
      border-radius: 38px;

      input {
        border-radius: 37px;
        flex: 1;
        height: 68px;
        line-height: 68px;
        opacity: 1;
        color: #999999;
        border: none;
        padding: 0 30px;
        color: #999999;
        letter-spacing: -1px;
        font-size: 26px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: LEFT;
      }

      .div {
        text-align: center;
        opacity: 1;
        width: 120px;
        line-height: 68px;
        margin-top: 2px;
        margin-right: 2px;
        width: 146px;
        height: 68px;
        background: #210f6d;
        border-radius: 36px;
        font-size: 26px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: CENTER;
        color: #ffffff;
      }
    }
  }
  .tab_area {
    position: relative;
    height: 76px;
    background: #100d65;
    border: 1px solid #fe7b08;
    .activeTab {
      box-sizing: border-box;
      display: inline-block;
      width: calc(100% / 5);
      height: 100%;
      border-right: 1px solid #fe7b08;
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #ffffff;
      background: #fe7b08;
    }
    .tab {
      box-sizing: border-box;
      display: inline-block;
      width: calc(100% / 5);
      border-right: 1px solid #fe7b08;
      height: 76px;
      line-height: 76px;
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #ffffff;
      .row1 {
        position: relative;
        top: -13px;
      }
      .tip {
        height: 50px;
        overflow: hidden;
        position: absolute;
        top: 20px;
        font-size: 22px;
        width: calc(100% / 5);
      }
    }
  }
  .banner_area {
    display: inline-block;
    opacity: 1;
    height: 340px;
    width: 100%;
    position: relative;
    z-index: 1;
    .img {
      // display: inline-block;
      background: #1e005a;
      width: 100%;
      height: 100%;
      .swipe_img {
        display: inline-block;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .time_area {
    // background: #fff;
    // position: fixed;
    left: 0;
    right: 0;
    top: 340px;
    z-index: 999;
    // height: 90px;
  }

  .time_block {
    width: auto;
    height: 55px;
    line-height: 55px;
    opacity: 1;
    background: linear-gradient(180deg, #ff8d1e, #ff540d);
    border-radius: 4px;
    margin: 15px 24px 0 24px;
    box-sizing: border-box;

    .text {
      height: 50px;
      opacity: 1;
      font-size: 30px;
      font-family: PingFang, PingFang-Medium;
      font-weight: 500;
      text-align: justify;
      color: #ffffff;
      padding-left: 24px;
      line-height: 50px;
    }

    .num {
      padding: 0 4px;
      text-align: center;
      display: inline-block;
      width: auto;
      height: 36px;
      line-height: 36px;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
      margin: 0 10px;
      color: #ff540d;
    }
  }
  .tab-bar {
    width: 100%;
    display: flex;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    .tab-item {
      position: relative;
      width: calc(100% / 3.33);
      height: 100%;
      text-align: center;
      font-size: 32px;
      font-family: PingFang, PingFang-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      &.active1 {
        color: #ffbb0e;
      }
      .active {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        height: 4px;
        background: #ffbb0e;
        width: 30px;
      }
    }
  }
}
</style>